<template>
  <div class="Money-password">
    <van-nav-bar title="设置资金密码" left-arrow @click-left="$router.back()" />
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <div class="zijinmima">资金密码</div>
          <van-field
            :type="passwordType"
            v-model="password"
            name="用户名"
            placeholder="请输入当前的密码"
            :rules="[{ required: true, message: '请填写当前的密码' }]"
          >
            <template #button>
              <span @click="isShow" class="eyes">
                <van-icon
                  name="browsing-history"
                  v-if="passwordType !== 'password'"
                />
                <van-icon name="eye" v-else />
              </span>
            </template>
          </van-field>
          <div class="querenmima">确认密码</div>
          <van-field
            v-model="passwordNew"
            :type="passwordOKType"
            name="密码"
            placeholder="请输入您要修改的密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
            <template #button>
              <span @click="isOKShow" class="eye">
                <van-icon
                  name="browsing-history"
                  v-if="passwordOKType !== 'password'"
                />
                <van-icon name="eye" v-else />
              </span>
            </template>
          </van-field>
          <div class="zaicishuru">请再次输入</div>
          <van-field
            v-model="passwordNew"
            :type="passwordOKType"
            name="密码"
            placeholder="请再次输入你要修改的密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
            <template #button>
              <span @click="isOKShow" class="eye">
                <van-icon
                  name="browsing-history"
                  v-if="passwordOKType !== 'password'"
                />
                <van-icon name="eye" v-else />
              </span>
            </template>
          </van-field>
        </van-cell-group>
        <p class="tishi">提示：资金密码应为8～16数字+字母组合。</p>
        <div style="margin: 16px">
          <van-button
            block
            type="primary"
            native-type="submit"
            color="linear-gradient(to right, #FA7D22, #FA461B)"
          >
            确认
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    // const onSubmit = (values) => {
    //   console.log("submit", values);
    // };
    return {
      password: "",
      passwordNew: "",
      passwordType: "password", //输入框类型
      passwordOKType: "password", //输入框类型
    };
  },
  methods: {
    isShow() {
      this.passwordType =
        this.passwordType === "password" ? "text" : "password";
    },
    isOKShow() {
      this.passwordOKType =
        this.passwordOKType === "password" ? "text" : "password";
    },
    onSubmit() {},
  },
};
</script>
<style scoped>
.Money-password {
  background-color: #f0f0f0;

  height: 100vh;
}
.tishi {
  text-align: center;
  font-size: 24px;
  color: #a5a9b3;
}

.van-cell-group--inset {
  margin: 0;
}
.zijinmima {
  margin: 76px 0 0 30px;
}
.querenmima {
  margin: 30px 0 0 30px;
}
.zaicishuru {
  margin: 30px 0 0 30px;
}
</style>
